<template>
  <common-card title="累计用户数" value="1,800,932">
    <template #default>
      <div ref="totalchart" :style="{ width: '100%', height: '100%' }"></div>
    </template>
    <template #footer>
      <div class="total-users-footer">
        <span>日同比</span>
        <span class="emphasis">80.02%</span>
        <div class="increase"></div>
        <span style="padding-left: 25px">月同比</span>
        <span class="emphasis">125.03%</span>
        <div class="decrease"></div>
      </div>
    </template>
  </common-card>
</template>

<script setup lang="ts">
import { onMounted, ref, Ref } from "vue";
import * as echarts from "echarts/core";
import {
  BarChart,
  BarSeriesOption,
  CustomChart,
  CustomSeriesOption,
} from "echarts/charts";
import {
  GridComponent,
  GridComponentOption,
  TooltipComponent,
  TooltipComponentOption,
} from "echarts/components";
import { SVGRenderer } from "echarts/renderers";
import commonCard from "@/components/common-card/index.vue";
type ECOption = echarts.ComposeOption<
  | GridComponentOption
  | BarSeriesOption
  | CustomSeriesOption
  | TooltipComponentOption
>;
echarts.use([
  GridComponent,
  TooltipComponent,
  BarChart,
  CustomChart,
  SVGRenderer,
]);
const totalchart = ref() as Ref<HTMLElement>;
onMounted(() => {
  const chart = echarts.init(totalchart.value);
  const options: ECOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: 0,
      bottom: 0,
      right: 0,
      top: 0,
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
    },
    series: [
      {
        //合并柱状图
        stack: "总量",
        type: "bar",
        data: [220],
        barWidth: 10,
        // 定制图标颜色
        itemStyle: {
          color: "#45c946",
          // color: "red",
        },
      },
      {
        stack: "总量",
        type: "bar",
        data: [240],
        // barWidth: 10,
        itemStyle: {
          color: "#eee",
        },
      },
      {
        type: "custom",
        data: [220],
        renderItem(params, api) {
          // 获取第一个元素
          const val = api.value(0);
          // 计算坐标
          const endPoint = api.coord([val, 0]);
          //定义自定义属性形状
          return {
            type: "group",
            position: endPoint,
            children: [
              {
                type: "path",
                shape: {
                  d: "M488.533333 211.2l-450.133333 563.2c-14.933333 19.2-2.133333 49.06666701 23.466667 49.066667L962.133333 823.466667c25.6 0 38.4-29.866667 23.466667-49.066667l-450.133333-563.2c-12.8-14.933333-34.133333-14.933333-46.933334 0z",
                  x: -6,
                  y: 10,
                  width: 12,
                  height: 10,
                  //定义缩放height，width
                  layout: "cover",
                },
                style: {
                  fill: "#45c946",
                },
              },
              {
                type: "path",
                shape: {
                  d: "M534.00000031 794l421.99999969-528c13.99999969-18 1.99999969-46.00000031-22.00000031-46.00000031H90.00000031c-24 0-36 28.00000031-22.00000031 46.00000031l421.99999969 528c12 13.99999969 31.99999969 13.99999969 44.00000062 0z",
                  x: -6,
                  y: -20,
                  width: 12,
                  height: 10,
                  layout: "cover",
                },
                style: {
                  fill: "#45c946",
                },
              },
            ],
          };
        },
      },
    ],
  };
  chart.setOption(options);
});
</script>

<style scoped>
.total-users-footer {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}
.emphasis {
  margin-left: 5px;
}
.increase {
  margin-bottom: 6px;
}
.decrease {
  margin-top: 0;
}
</style>
